<template>
	<div class="homebg">
    <div class="mp-comment-container mp-border-bottom">
     <h3 class="mp-comment-title">用户评论</h3>
     <div class="mp-comment-list" v-for="(item,index) in list">
      <div class="mp-comment-item mp-border-top">
         <div class="mp-comment-stardate">
            <span class="mpf-starlevel">
              <i class="iconfont" style="color:#ffbf00;" v-for="item of item.stars">&#xe6b0;</i>
            </span>
            <span class="mp-comment-date">{{toHidestring(item.userid)}}&nbsp;&nbsp;{{item.date}}</span>
         </div>
         <div class="mp-comment-content" :class="item.show?'heighthide':'noHeighthide'">{{item.content}}
           <div class="touming" v-show='item.show' v-if="item.content.length > 150"></div>
         </div>
         <!-- 展开与收起 -->
        <div class="zhankshouq" @click="spreadinfo(item)" v-if="item.content.length > 150">
          <span v-show='item.show'>
            展开
            <i class="iconfont">&#xe626;</i>                
          </span>
          <span v-show='!item.show'>
            收起
            <i class="iconfont">&#xe61d;</i>
          </span>
        </div>
        <!--********** -->
         <div class="mp-comment-imgs">
          <div class="mp-comment-imgouter" v-for="(itemimg,index) in item.imgUrl">
           <div class="mp-comment-imginner">
            <img class="mp-comment-img" :src="itemimg"/>
           </div>
          </div>
          <div class="mp-comment-imgnumtag">
           <span class="commenttag-bg"></span>
           <span class="comment-tagnum">共 {{item.imgUrl.length}} 张</span>
          </div>
         </div>
        </div>

      </div>
       <a href="javascript:void(0);">
         <div class="mp-more-refresh mp-border-top">
          查看全部评论
          <span class="mp-iconfont">F</span>
         </div>
       </a>
    </div>
    <div class="mpw-dock" :class="{mpwdockfadein:isMpwdockshow}">
        <div class="mpw-dock-header mpf-border-bottom mpf-border-top"></div>
        <div class="mpw-dock-content">
            <div class="mpf-control-outer"> 
                <div class="mp-booking-info"> 
                    <h5 class="mpf-booking-title">【提前1小时预定】{{tikname}}(官方直销)</h5> 
                    <p class="mpf-booking-price"><span class="mpg-price">&yen;<em class="mpg-price-num">{{tikprice}}</em></span><span>/张</span> <span class="mp-prdcard-gray mp-prdcard-marketing" style="display: none;"><span mp-role="priceCashDesc"></span></span> <span></span></p> 
                </div> 
                <div class="mpf-booking-select"> 
                    <h6 class="mpf-booking-note">价格日历</h6> 
                    <div class="mpf-booking-datecard clrfix"> 
                       <span @click="todayactived(0)" class="mpf-datecard" :class="{mpfactived:isActivedone}" :index="0"> 
                           <em class="mpf-datecard-name">今天</em> 
                           <strong class="mpf-datecard-detail">{{themonth}}月{{theday}}日</strong>
                       </span> 
                       <span @click="todayactived(1)" class="mpf-datecard" :class="{mpfactived:isActivedtwo}" :index="1"> 
                           <em class="mpf-datecard-name">明天</em> 
                           <strong class="mpf-datecard-detail">{{themonth}}月{{theday+1}}日</strong> 
                       </span> 
                       <span @click="todayactived(2)" class="mpf-datecard" :class="{mpfactived:isActivedthree}" :index="2"> 
                           <em class="mpf-datecard-name">后天</em> 
                           <strong class="mpf-datecard-detail">{{themonth}}月{{theday+2}}日</strong> 
                       </span> 
                       <span @click="choosedate()" class="mpf-datecard  mpf-datecard-wait" :class="{mpfactived:isActivedfour}"> 
                           <em class="mpf-datecard-name" :class="{linehgt:isActivedfour}">其他日期</em> 
                           <strong class="mpf-datecard-detail" v-show="isActivedfour">{{choosethemonth}}月{{choosetheday}}日</strong> 
                       </span> 
                    </div>
                </div> 
                <div class="mpf-booking-light">
                需要在游玩当天的20:00前预订；预订后1小时才能入园
                </div> 
            </div> 
            <a title="门票预订" class="mpf-booking-btn" href="javascript:void(0);">立即预订</a>
        </div>
        <div class="mpg-iconfont mpw-dock-close" @click="closebooktik">
            <span class="iconfont" style="font-size:24px;">&#xe628;</span>
        </div>
    </div>
    <div class="mpg-mask" v-show="dpynone"></div>


    <div class="mpw-dock" :class="{mpwdockfadein:isdateshow}">
        <div class="mpw-dock-header mpf-border-bottom mpf-border-top" style="display: block;">
            <span class="mpg-iconfont mpw-dock-back" style="display:none;"></span>
            选择时间
        </div>
        <div class="mpw-dock-content">
            <div class="mpw-calendar-body">
                <vue-better-calendar @select-single-date="getDate" mode="single"></vue-better-calendar>
            </div>
        </div>
        <div class="mpg-iconfont mpw-dock-close" @click="closedate">
            <span class="iconfont" style="font-size:24px;">&#xe628;</span>
        </div>
    </div>


	</div>
</template>

<script>

export default{
	name: 'DetailListcomment',
	props: {
		list: Array
	},
  data () {
    return {
      imgUrl:[],
      picnum:0,
      tikname:'',
      tikprice:'',
      isShowicon:false,
      isheighthide:true,
      whitebanner:true,
      isMpwdockshow:false,
      isdateshow:false,
      itemheight:true,
      dpynone:false,
      isActivedone:true,
      isActivedtwo:false,
      isActivedthree:false,
      isActivedfour:false,
      themonth:'',
      theday:'',
      choosethemonth:'',
      choosetheday:'',
      getdateactive:0,
    }
  },
  methods: {
    // 用户名隐藏中间
    toHidestring (name) {
      let char = '***'
      // return name.substr(0, 1) + char + name.substr(-1, 1) 这样写也无误，下面加三目运算符是防止控制台报错     
      return name?name.substr(0, 1) + char + name.substr(-1, 1):''
    },
    //展开与收起
    spreadinfo (item) {
      item.show = !item.show        
    },
    closebooktik () {
      this.dpynone = false
      this.isMpwdockshow = false
    },
    choosedate () {
      this.isdateshow = true
    },
    closedate () {
      this.isdateshow = false
    },
    // 这个用v-show="showbookmenu()"方法不成功
    // showbookmenu (item) {
    //   let itmhgt = item.content.length
    //   if (itmhgt > 150) {
    //     return item.show = false
    //   }
    // },
    getDate(d){
      // console.log(d);   //这时打印出来的时间格式是：["2019", "04", "25"]   大家可以根据自己想要的数据结构进行分割
      this.getdateactive = 1
      this.choosethemonth = parseInt(d[1])
      const delzero = parseInt(d[2])
      this.choosetheday = ~~delzero
      if (this.getdateactive == 1) {
        this.isActivedone = false
        this.isActivedtwo = false
        this.isActivedthree = false  
        this.isActivedfour = true  
      }
      // return this.getdateactive
    },   
    
    // index传值具有唯一性，不用加this，通过函数括号里的值传进去，上面加载评论的
    // 也一样
    todayactived (index) {
      if (index == 0) {
        this.isActivedone = true
        this.isActivedtwo = false
        this.isActivedthree =false
        this.isActivedfour = false                
      }else if (index == 1) {
        this.isActivedone = false
        this.isActivedtwo = true
        this.isActivedfour = false
        this.isActivedthree =false  
      }else if (index == 2) {
        this.isActivedone = false
        this.isActivedtwo = false
        this.isActivedfour = false
        this.isActivedthree = true  
      }
    },
    todayactivedotr () {
      if (this.getdateactive ==1) {
        alert(333)
        this.isActivedone = false
        this.isActivedtwo = false
        this.isActivedthree = false  
        this.isActivedfour = true          
      }
    },
 // 全局变量给兄弟组件之间传值
    showbookmenu () {
        let self=this
        eventBus.$on('acceptBook',function(){
          self.isMpwdockshow = true
          self.dpynone = true
          //用完一次直接处理掉这个变量 eventBus.$off('acceptBook')
        }),
        eventBus.$on('acceptprice',function(msgp){
          self.tikprice = msgp
        }),
        eventBus.$on('acceptname',function(msgn){
          self.tikname = msgn
        })
    },
    getbookdate () {
        const date = new Date()
        const tmonth = date.getMonth() + 1
        const tday = date.getDate()
        return this.themonth = tmonth,this.theday = tday     
    },
  },
  mounted () {
    this.toHidestring()
    this.showbookmenu()
    this.getbookdate()
    this.todayactivedotr()
  }
}


// 通过jq使评论短的不显示展开
// $(document).ready(function(){
//   setInterval(function(){
//     $('.mp-comment-content').each(function(){
//       var commheight = $(this).height()
//         if (commheight<125) {
//             $(this).next('.zhankshouq').css('display','none')
//             $(this).find('.touming').css('display','none')
//             $(this).removeClass('heighthide')
//         } 
//     })
//   }, 300)
// })
$(document).ready(function(){

})
</script>

<style lang="stylus" scoped>
  .linehgt
    line-height:0.36rem!important
  .otherdate
    display:none;
  .zhankshouq
    width: 100%
    margin: auto
    text-align: center
  .showicon
    display:none
  .homebg
    background-color:#f5f5f5
    padding-top:.1rem
  .mp-comment-content
    height:auto
    overflow:hidden
    position:relative
  .heighthide
    max-height:130px
  .noHeighthide
    max-height:none
  .touming
    width:100%
    height:40px
    background:#fff
    position:absolute
    bottom:0
    background: -webkit-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1))
</style>